<template>
  <div>
    <el-form-item
      v-for="col in columns"
      :key="col.name"
      :label="col.label"
      :prop="col.name"
    >
      <el-date-picker
        v-if="['year', 'month', 'date', 'datetime'].includes(col.type)"
        v-model="value[col.name]"
        :disabled="false"
        :type="col.type"
        :placeholder="col.placeholder"
      />

      <el-select
        v-else-if="['select', 'select2'].includes(col.type)"
        v-model="value[col.name]"
        :disabled="false"
        :multiple="col.multiple"
        :filterable="true"
        clearable
        :placeholder="col.placeholder"
      >
        <el-option
          v-for="item in selectOptions[col.name] || []"
          :key="col.type === 'select' ? item.id : item.value"
          :label="item.display_name || item.name"
          :value="col.type === 'select' ? item.id : item.value"
        />
      </el-select>

      <el-cascader
        v-else-if="col.type === 'cascader'"
        v-model="value[col.name]"
        :disabled="false"
        clearable
        :options="selectOptions[col.name]"
        :placeholder="col.placeholder"
      />

      <el-radio-group
        v-else-if="col.type === 'radio'"
        v-model="value[col.name]"
        :disabled="false"
      >
        <el-radio-button
          v-for="item in selectOptions[col.name]"
          :key="item.value"
          :label="item.value"
        >
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>

      <el-checkbox
        v-else-if="col.type === 'check'"
        v-model="value[col.name]"
        :disabled="false"
      >
        {{ col.text }}
      </el-checkbox>

      <el-input-number
        v-else-if="col.type === 'number'"
        v-model="value[col.name]"
        :disabled="false"
        :precision="col.precision !== undefined ? col.precision : undefined"
        :step="col.step !== undefined ? col.step : 1"
        :min="col.min !== undefined ? col.min : 0"
        :max="col.max !== undefined ? col.max : undefined"
      />

      <el-input
        v-else-if="col.type === 'textarea'"
        v-model="value[col.name]"
        type="textarea"
        :disabled="false"
        style=" width: 280px;"
        :autosize="{ minRows: 2, maxRows: 4 }"
        :placeholder="col.placeholder"
      />

      <UploadImage
        v-else-if="col.type === 'image'"
        :field-name="col.name"
        :image="get_image(col)"
        @onloadend="loadImage1"
      />

      <el-input v-else v-model="value[col.name]" />
    </el-form-item>
  </div>
</template>

<script>
import UploadImage from '@/components2/UploadImage'

export default {
  name: 'FormItem',
  components: { UploadImage },
  directives: {},
  filters: {},

  props: {
    value: {
      type: Object,
      default: () => {
        return {}
      }
    },
    columns: { type: Array, default: () => [] },

    selectOptions: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  computed: {
    //
  },

  methods: {
    get_image(col) {
      // console.log('xxxxxx, get_image', col.url, this.value)
      // src="dev-api/web/image?model=res.partner&id=3&field=image_128&ss=1"

      const baseURL = process.env.VUE_APP_BASE_API

      let url_value

      const image_load = this.value[col.name]
      if (image_load) {
        url_value = `data:image/jpeg;base64,${image_load}`
      } else if (this.value.id) {
        const {
          url,
          params: { model, field }
        } = col.url

        url_value = `${baseURL}${url}?model=${model}&id=${this.value.id}&field=${field}`
      }

      // console.log('xxxxxx, get_image', url_value)
      return url_value
    },

    loadImage1(params) {
      const { value, field } = params
      // console.log('xxxxx, ', params)

      const ss = value.split(';base64,')
      const vs = { ...this.value }
      vs[field] = ss[1]
      this.$emit('input', vs)
      // this.value = vs
    }
  }
}
</script>
